<template>
  <div class="web-container book-type">
    <div class="content">
      <div class="type-nav" v-if="accId == '3'">
        <ul>
          <li>分类:</li>
          <li v-for="(item,index) in sublist" :class="$route.query.subcolumnId == item.columnId?'active':''" :key="index" @click="getList(item)">{{item.columnName}}</li>
        </ul>
      </div>
      <div class="content-list">
        <div class="item" v-for="(item,index) in classDetailList" :key="index">
        <span class="item-cover" :style="{backgroundImage:'url('+item.cover+')'}"></span>
        <div class="item-center">
          <span class="name" v-html="item.bookName"></span>
          <span class="author" v-html="item.author"></span>
          <span class="desc" v-html="item.press"></span>
        </div>
        <div class="item-right btn">
          <el-button type="primary" round @click="goToInfo(item.bookId,item.columnId,item.bookName)">书籍详情</el-button>
        </div>
      </div>
      </div>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { GetBookDetailList } from "@/api/Api";
import { getColumnName } from "@/api/index";
import { setTimeout } from "timers";
export default {
  data() {
    return {
      classDetailList: [],
      sublist: [],
      total: 0,
      pageSize: 8,
      currentPage: Number(this.$route.query.currentPage) || 1
    };
  },
  created() {
    if (this.accId == "3") {
      this.bookTwoItem(this.$route.query.columnId);
    } else {
      this.init();
    }
  },
  computed: {
    accId() {
      return this.$store.state.user.accId;
    }
  },
  components: {},
  methods: {
    bookTwoItem(columnId) {
      getColumnName(columnId)
        .then(res => {
          let sublist = res.data.data;
          this.sublist = sublist;
          if (this.$route.query.subcolumnId) {
            console.log("有subcolumnId");
          } else {
            this.getList(sublist[0]);
            console.log("无subcolumnId");
          }
          this.currentPage = Number(this.$route.query.currentPage) || 1;
          this.init();
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCurrentChange(val) {
      if(this.accId == '3'){
        this.$router.push(
        this.$route.path +"?currentPage=" +this.currentPage +"&resType=" +this.$route.query.resType +"&columnId=" +this.$route.query.columnId +"&subcolumnId=" +this.$route.query.subcolumnId
      );
      }else{
        this.$router.push(
        this.$route.path +"?currentPage=" +this.currentPage +"&resType=" +this.$route.query.resType +"&columnId=" +this.$route.query.columnId);
      }
    },
    getList(item) {
      this.subcolumnId = item.columnId;
      this.$router.push(
        this.$route.path +"?resType=" +this.$route.query.resType +"&columnId=" +this.$route.query.columnId +"&subcolumnId=" +this.subcolumnId
      );
    },
    goToInfo(bookId, columnId, bookName) {
      this.$router.push("/book/info?bookId=" +bookId +"&columnId=" +columnId +"&bookName=" +bookName);
    },
    init() {
      if (this.accId == "3") {
        GetBookDetailList(
          this.$route.query.resType,
          this.$route.query.subcolumnId,
          this.currentPage,
          this.pageSize
        ).then(result => {
          this.total = result.total;
          this.currentPage = Number(this.$route.query.currentPage) || 1;
          this.classDetailList = result.data;
        });
      } else {
        GetBookDetailList(
          this.$route.query.resType,
          this.$route.query.columnId,
          this.currentPage,
          this.pageSize
        ).then(result => {
          this.total = result.total;
          this.currentPage = Number(this.$route.query.currentPage) || 1;
          this.classDetailList = result.data;
        });
      }
    }
  },
  watch: {
    $route() {
      this.currentPage = Number(this.$route.query.currentPage) || 1;
      this.init();
    },
    "$route.query.columnId"() {
      // this.currentPage = Number(this.$route.query.currentPage) || 1;
      this.bookTwoItem(this.$route.query.columnId);
    }
  }
};
</script>
<style lang="less" scoped>
.book-type {
  background: #fff;
  border-radius: 10px;
  min-height: 800px;
  .content {
    padding: 0px 30px 20px 30px;
    height: 100%;
    .content-list{
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #f1f1f1;
      margin-bottom: -1px;
    }
    .type-nav {
      overflow: hidden;
      padding: 10px 0px;
      ul {
        padding: 0px;
        li:first-child {
          float: left;
          padding: 10px 0px;
        }
        li {
          float: left;
          cursor: pointer;
          padding: 10px 20px;
        }
        li.active {
          color: #15c798;
        }
      }
    }
    .pagination {
      margin-top: 20px;
    }
    .item:nth-child(1) {
      .item-cover {
        .cover-label {
          background-position: 0px;
          color: #fff;
        }
      }
    }
    .item:nth-child(2) {
      .item-cover {
        .cover-label {
          background-position: -30px;
          color: #fff;
        }
      }
    }
    .item:nth-child(3) {
      .item-cover {
        .cover-label {
          background-position: -60px;
          color: #fff;
        }
      }
    }
    .item {
      display: flex;
      margin-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #f1f1f1;
      width: 50%;
      position: relative;
      margin-bottom: -1px;
      .item-cover {
        width: 156px;
        height: 210px;
        display: block;
        background: url("/static/images/base/book.png") no-repeat;
        background-size: cover;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
      }
      .item-center {
        margin-left: 30px;
        width: 350px;
        span {
          display: block;
        }
        .name {
          font-size: 20px;
          margin-top: 10px;
        }
        .author {
          font-size: 16px;
          margin-top: 5px;
          color: #868686;
        }
        .desc {
          margin-top: 5px;
          font-size: 16px;
          color: #a1a1a1;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
      .item-right {
        position: absolute;
        bottom: 40px;
        left: 185px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        flex: 1;
        flex-direction: column;
        .el-button {
          // background-color: #15c798;
          line-height: 32px;
          width: 110px;
          font-size: 16px;
          padding: 0px 20px;
          border: 2px solid transparent;
          .el-button--primary:focus,
          .el-button--primary:hover {
            // background-color: #15c798;
          }
        }
      }
    }
  }
}
</style>


